<template>
    <div class="swiper-box">
      <van-swipe ref="$swipe" @change="onChange" :autoplay="autoplay">
        <van-swipe-item v-for="(src, index) in imgList" :key="index">
          <img :src="src" alt=""/>

          <!--<video-->
            <!--width="100%" height="240"-->
            <!--ref="videoPlay"-->
            <!--controls>-->
            <!--您的浏览器不支持 audio 元素。-->
          <!--</video>-->
        </van-swipe-item>
        <!--<div class="custom-indicator" slot="indicator" >-->
          <!--<span :class="item == index ? 'active' : ''" v-for="(src, index) in imgList" :key="index">-->
            <!--<img :src="src" alt="" @click="handleIndex(index)">-->
          <!--</span>-->
        <!--</div>-->
      </van-swipe>
    </div>
</template>

<script type="text/ecmascript-6">

  export default {
    data(){
      return {
        item:'',
        videoList: [
          {
            src: 'https://shop.sofoshare.com/Uploads/sofo.mp4'
          },
          {
            src: 'https://ask.ivideo.sina.com.cn/v_play_ipad.php?vid=32437750201&r=video.sina.com.cn%2Fview%2F324377502.html&r=video.sina.com.cn%2Fview%2F324377502.html'
          }
        ]
      }
    },
    props:['imgList','autoplay'],
    created() {
      this.$nextTick(() => {
//        this.$refs.videoPlay[0].src = this.videoList[0].src
      })
    },
    methods:{
      onChange(index) {
        this.item = index
//        this.$refs.videoPlay[index].src = this.videoList[index].src
      },
      handleIndex(index) {
        this.$refs.$swipe.swipeTo(index)
//        this.$refs.videoPlay[index].src = this.videoList[index].src
      },
    }
  }
</script>

<style lang="scss">
  .swiper-box{
    width: 100%;
    height: 100%;

    .van-swipe{
      height: 100%;
    }

    img{
      max-width: 100%;
    }

    /*.van-swipe__indicator--active{*/
      /*width: 10px;*/
      /*border-radius:3px;*/
    /*}*/

    .custom-indicator {
      display: flex;
      justify-content: space-around;
      height: 50px;
      width: 100%;

      span {
        /*display: inline-block;*/
        /*flex: 1;*/

        img {
          width: 48px;
          height: 48px;
        }
      }

      span.active {
        border: 1px solid #000;
        box-sizing: border-box;
      }
    }
  }

</style>
